<template>
	<view v-show="readyToShow" class="modal-outer" :style="{height: bgObj.isOverflow ? '1600rpx' : '100%'}">
		<view class="modal-container" :style="[bgObj.bgBody]">
			<image 
			class="modal-fanhui" 
			:src="sheep.$url.static('/assets/img/modal-fanhui.png')" mode="aspectFill" 
			:style="[bgObj.bgBack]"
			@tap="$emit('close')"
			></image>
			<view class="modal-body" :style="[bgObj.bodyStyle]">
				<view class="modal-body-head" v-if="modalType.includes('bird')">
					<image class="market-bird-head" :src="sheep.$url.static('/assets/img/modal-market-bird-head.png')" mode="aspectFill" ></image>
					<view class="modal-body-head-lingli font-AlimamaDongFangDaKaiRegular">
						{{(info && info.powerValue) || 890}}
					</view>
				</view>
				<view class="modal-body-head" v-else></view>
				<s-modal-intro 
				class="modal-body-top" 
				:modalType="modalType" 
				v-if="modalType !== 'lingmai'"
				:detail="state.detail"
				></s-modal-intro>
				
				<s-modal-count v-if="modalType === 'market-fruit'" 
				class="modal-body-center"></s-modal-count>
				
				<s-modal-lingmai class="modal-body-lingmai" 
				v-else-if="modalType === 'lingmai'"></s-modal-lingmai>
				
				<s-modal-parent v-else 
				class="modal-body-center" 
				:modalType="modalType" 
				:detail="state.detail"></s-modal-parent>
				
				<s-modal-pay class="modal-body-bottom" 
				:modalType="modalType"></s-modal-pay>
			</view>
			
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import { onMounted, computed, reactive, ref, nextTick } from 'vue';
	import backpackApi from '@/sheep/api/zhuque/backpack'
	const props = defineProps({
		
		/*弹窗类型 modalType：
		market-bird 商城朱雀弹窗
		market-egg 商城朱雀蛋弹窗
		market-fruit 商城火灵果弹窗
		backpack-bird 背包朱雀弹窗
		backpack-egg 背包朱雀蛋弹窗
		lingmai 灵脉升级弹窗
		*/
		modalType: {
			type: String,
			default:'lingmai'
		},
		
		//传入弹窗的信息
		info: {
			type: Object,
			default:{
				
			}
		}
	});
	const {windowHeight, windowWidth} = uni.getWindowInfo()
	
	const bgObj = computed(() => {
		switch (props.modalType){
			case 'market-bird': {
				return {
						bgBody:{
							background: `url(${sheep.$url.static(
							  '/assets/img/modal-beij-market-bird.png'
							)}) no-repeat center bottom / 750rpx 1492rpx`,
							width: '100%',
							height: '100%',
						},
						bgBack:{
							marginRight: '40rpx',
							marginBottom: '1402rpx',
						},
						bodyStyle:{
							height: '1508rpx',
							bottom: '0rpx',
						},
						isOverflow: windowHeight / windowWidth > 1492 / 750 ? false : true
					}
				}
			case 'market-egg': {
				return {
						bgBody:{
							background: `url(${sheep.$url.static(
							  '/assets/img/modal-beij-market-egg.png'
							)}) no-repeat center bottom / 750rpx 1446rpx`,
							width: '100%',
							height: '100%',
						},
						bgBack:{
							marginRight: '40rpx',
							marginBottom: '1356rpx',
						},
						bodyStyle:{
							height: '1462rpx',
							bottom: '0rpx',
						},
						isOverflow: windowHeight / windowWidth > 1446 / 750 ? false : true
					}
				}
			case 'market-fruit': {
				return {
						bgBody:{
							background: `url(${sheep.$url.static(
							  '/assets/img/modal-beij-market-fruit.png'
							)}) no-repeat center bottom / 750rpx 1172rpx`,
							width: '100%',
							height: '100%',
						},
						bgBack:{
							marginRight: '40rpx',
							marginBottom: '1076rpx',
						},
						bodyStyle:{
							height: '1182rpx',
							bottom: '0rpx',
						},
						isOverflow: windowHeight / windowWidth > 1172 / 750 ? false : true
					}
				}
			case 'backpack-bird':{
				return {
						bgBody:{
							background: `url(${sheep.$url.static(
							  '/assets/img/modal-beij-backpack-bird.png'
							)}) no-repeat center bottom / 750rpx 1308rpx`,
							width: '100%',
							height: '100%',
						},
						bgBack:{
							marginRight: '40rpx',
							marginBottom: '1212rpx',
						},
						bodyStyle:{
							height: '1308rpx',
							bottom: '0rpx',
						},
						isOverflow: windowHeight / windowWidth > 1308 / 750 ? false : true
					}
			}
			case 'backpack-egg':{
				return {
						bgBody:{
							background: `url(${sheep.$url.static(
							  '/assets/img/modal-beij-backpack-egg.png'
							)}) no-repeat center bottom / 750rpx 1248rpx`,
							width: '100%',
							height: '100%',
						},
						bgBack:{
							marginRight: '40rpx',
							marginBottom: '1152rpx',
						},
						bodyStyle:{
							height: '1258rpx',
							bottom: '0rpx',
						},
						isOverflow: windowHeight / windowWidth > 1248 / 750 ? false : true
					}
			}
			case 'lingmai':{
				return {
						bgBody:{
							background: `url(${sheep.$url.static(
							  '/assets/img/modal-beij-lingmai.png'
							)}) no-repeat center bottom / 750rpx 1100rpx`,
							width: '100%',
							height: '100%',
						},
						bgBack:{
							marginRight: '40rpx',
							marginBottom: '1004rpx',
						},
						bodyStyle:{
							height: '1100rpx',
							bottom: '0rpx',
						},
						isOverflow: windowHeight / windowWidth > 1100 / 750 ? false : true
					}
			}
			default:{
				return {}
			}
				
		}
	})
	
	const readyToShow = ref(false);
	const state = reactive({
		detail:{
			"id": 123459,
			"userId": 10086,
			"sex": 0,
			"algebra": 2,
			"powerValue": 44,
			"luckValue": 56,
			"status": 0,
			"rank": 1,
			"basicsMessage": ""
		}
	})
	onMounted(async()=>{
		const userId = sheep.$store('user').$state.userInfo.userId || '10086';
		if(props.info){
			backpackApi.cubMessage({
				id: props.info.id,
				userId
			}).then( ({ data }) =>{
				console.log(data)
				state.detail = data;
				readyToShow.value = true;
			}).catch( e =>{
				console.log(e)
			})
			
		}
	})
	// nextTick(()=>{
		
	// })
</script>

<style lang="scss" scoped>
	.modal-outer{
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.8);
		z-index: 999;
		.modal-container{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-end;
			.modal-fanhui{
				align-self: flex-end;
				width: 50rpx;
				height: 50rpx;
				z-index:99;
			}
			.modal-body{
				position: absolute;
				display: flex;
				flex-direction: column;
				align-items: center;
				.modal-body-head{
					width: 750rpx;
					height: 106rpx;
					.market-bird-head{
						width: 750rpx;
						height: 106rpx;
					}
					.modal-body-head-lingli{
						position: absolute;
						width:120rpx;
						height: 34rpx;
						white-space: nowrap;
						top: 40rpx;
						left: 220rpx;
						color: #FFF3C9;
						text-align: right;
						font-size: 48rpx;
						font-style: normal;
						font-weight: 400;
						line-height: 34rpx; 
					}
				}
				.modal-body-top{
					margin-top: 18rpx;
				}
				.modal-body-center{
					margin-top: 36rpx;
				}
				.modal-body-bottom{
					margin-top: 36rpx;
				}
				
				.modal-body-lingmai{
					margin-top: -56rpx;
				}
				
			}
		}
	}  
</style>
